<template>
  <div>
<h2>欢迎你 {{name}}! </h2>
    <h3>录入学生信息</h3>
    <p>学生姓名<input type="text" v-model="form.name"></p>
    <button @click="add">确认添加</button>

    <h2>您的学生有以下👇</h2>
    <table align="center">
      <tr>
        <td>学生</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in list">
        <td>{{i.name}}</td>
        <td>
          <button @click="dele(i.id)">删除</button>
        </td>
      </tr>
    </table>

    <h2>未分班的同学有以下👇</h2>
    <ul v-for="i in list_null">
      <li>{{i.name}}
        <button @click="add_null(i.id)">加入本班</button>
      </li>
    </ul>


  </div>
</template>

<script>
export default {
  name: "tzhuye",
  data(){
    return{
      name:localStorage.getItem('name'),
      userid:localStorage.getItem('userid'),
      form : {techer:localStorage.getItem('userid')},
      list:[],
      list_null:[]
    }
  },
  methods:{
    add(){
      this.$axios.post('users/Tstu_API/',this.form)
      .then(i=>{
        alert(i.data.code)
        this.show()
      })
    },
    show(){
      this.$axios.get('users/Tstu_API/?userid='+this.userid)
      .then(i=>{
        this.list = i.data.list

      })
    },
    dele(id){
      this.$axios.delete('users/Tstu_API/?id='+id)
      .then(i=>{
        if (i.data.code== 200){
          alert('删除完成')
          this.show()
          this.show_null()
        }
      })
    },
    show_null(){
      this.$axios.get('users/Tstu_null_API/')
      .then(i=>{
        this.list_null = i.data.list
        this.show()
      })
    },
    add_null(id){
      this.$axios.put('users/Tstu_null_API/?id='+id+'&userid='+this.userid)
      .then(i=>{
        this.show()
        this.show_null()

      })
    }
  },
  mounted() {
    this.show()
    this.show_null()
  }
}
</script>

<style scoped>

</style>
